<template>
  <div class="app-container collect">
    <span class="title">我的收藏</span>
    <div class="content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="图书" name="first">
          <collecbook></collecbook>
        </el-tab-pane>
        <el-tab-pane label="期刊" name="second">
          <collecperiodical></collecperiodical>
        </el-tab-pane>
        <el-tab-pane label="报纸" name="third">
          <collecnewspaper></collecnewspaper>
        </el-tab-pane>
        <el-tab-pane label="视听" name="fourth">
          <collecmvideo></collecmvideo>
        </el-tab-pane>
        <el-tab-pane label="悦读" name="five">
          <collecread></collecread>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import collecbook from "@/components/collec/book";
import collecperiodical from "@/components/collec/periodical";
import collecnewspaper from "@/components/collec/newspaper";
import collecmvideo from "@/components/collec/video_music";
import collecread from "@/components/collec/read";
export default {
  data() {
    return {
      activeName: "first"
    };
  },
  components: {
    collecbook,
    collecperiodical,
    collecnewspaper,
    collecmvideo,
    collecread
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab.label, event);
      // this.$router.push(this.$route.path + "?label=" + tab.label+"&currentPage=1");
    }
  }
};
</script>
<style lang="less" scoped>
.custom-dz{
  .collect .content .el-tabs__item.is-active{
    color: #e93926
  }
}
.collect {
  height: 100%;
  width: 100%;
  .content {
    width: 100%;
  }
  .title {
    font-size: 24px;
    margin-bottom: 16px;
    display: block;
  }
}
</style>
<style lang="less">
.collect {
  .content {
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
    .el-tabs__item {
      font-size: 18px;
    }
    .el-tabs__item:hover {
      // color: #15c798;
    }
    .el-tabs__item.is-active {
      // color: #15c798;
    }
    .el-tabs__active-bar {
      // background-color: #15c798;
    }
    .el-tabs__nav {
      padding-bottom: 5px;
    }
  }
}
</style>


